<template>
  <p>子组件</p>
  <el-divider>手动转换信息</el-divider>
  <el-text class="ma-1">状态 - {{ isActive }}</el-text>
  <el-divider direction="vertical" />
  <el-text class="ma-1">name - {{ name }}</el-text>
  <el-divider direction="vertical" />
  <el-text class="ma-1">age - {{ age }}</el-text>
  <el-divider>直接解构</el-divider>
  <el-text class="ma-1">状态 - {{ isActive2 }}</el-text>
  <el-divider direction="vertical" />
  <el-text class="ma-1">name - {{ name2 }}</el-text>
  <el-divider direction="vertical" />
  <el-text class="ma-1">age - {{ age2 }}</el-text>
</template>

<script setup name="user">
import { ref, watch, computed, toRefs, toRef } from 'vue'
// 定义props
const props = defineProps({
  user: Object,
  isActive: Boolean
})

// ！！！关键 - 手动转换
// 对于对象，使用toRefs()
const { name, age } = toRefs(props.user)
// 对于原始值，使用toRef()
const isActive = toRef(props, 'isActive')

// 在3.4，直接解构，响应性丢失
const { user: user2, isActive: isActive2 } = props
const { name: name2, age: age2 } = props.user
</script>

<style lang="scss" scoped></style>
